<template>
  <div class="login">
    <div class="logo"></div>
    <div class="login-warp">
      <p class="title">{{title}}</p>
      <form-create v-model="fApi" class="p-v-10" :rule="rule" :option="option"></form-create>
      <div class="tip-warp">
        <p>为了您更好的使用体验，建议使用Chrome浏览器。</p>
        <el-link href="https://www.google.cn/chrome/" target="_blank" type="warning">下载Chrome浏览器</el-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      captcha: {},
      fApi: null,
      rule: [
        {
          type: 'Input',
          field: 'username',
          props: {
            type: 'text',
            prefixIcon: 'el-icon-user',
            placeholder: '用户名称'
          },
          validate: [
            { required: true, message: '请输入用户名称', trigger: 'blur' }
          ]
        },
        {
          type: 'Input',
          field: 'password',
          props: {
            type: 'password',
            prefixIcon: 'el-icon-goods',
            placeholder: '用户密码'
          },
          validate: [
            { required: true, message: '请输入用户密码', trigger: 'blur' }
          ]
        },
        {
          type: 'os-captcha',
          field: 'captcha',
          props: {
            placeholder: '验证码'
          },
          validate: [
            {
              type: 'string',
              len: 4,
              // required: true,
              message: '请输入4位验证码'
            }
          ],
          on: {
            change: (val) => {
              this.captcha = val
            }
          }
        }
      ],
      option: {
        submitBtn: {
          icon: '',
          innerText: '登录',
          nativeType: 'submit'
        },
        onSubmit: this.onSubmit
      }
    }
  },
  created () {
    // console.log(this)
  },
  computed: {
    title () {
      return '开源平台'
      // return window.location.hostname.includes('lt') ? '管理平台' : '管理平台【测试】'
    }
  },
  methods: {
    async onSubmit (formData) {
      this.fApi.btn.loading(true)
      // const formData = this.fApi.formData()
      const params = {
        username: formData.username,
        // username: (formData.code ? formData.code + '@' : '') + formData.username + '#TT10',
        password: formData.password,
        captcha: formData.captcha,
        manage: '0',
        ignoreCaptcha: '1'
      }
      const { data } = await this.$store.dispatch(this.$config?.actions?.login || 'login', params)
      // console.info('-----------data: ' + JSON.stringify(data.token))
      this.fApi.btn.loading(false)
      if (data) {
        localStorage.setItem('token', data.token)
        this.$router.push('/')
        this.$utils.message.success('登录成功')
      } else {
        this.captcha.refresh()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 1000px;
  height: 600px;
  //background: #fff url("../../assets/images/bg.jpg") top center no-repeat;
  // background: #00ff00 url(../../assets/images/bg.jpg) no-repeat fixed top;
  // background-size: cover;
  // position: relative;
  .logo {
    width: 75px;
    height: 61px;
    background: url("../../assets/images/logo.png") top center no-repeat;
    position: absolute;
    background-size: 100%;
    top: 30px;
    left: 36px;
  }
  .login-warp {
    position: absolute;
    right: 200px;
    bottom: 120px;
    width: 300px;
    // height: 350px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 30px;
  }
  .title {
    font-size: 18px;
    font-weight: 500;
    color: #666;
  }
  .btn-warp {
    width: 100%;
  }
  .el-button {
    width: 100%;
  }
  .el-button + .el-button {
    margin-left: 0;
    margin-top: 10px;
  }
  .tip-warp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .m-tb-10 {
    margin: 20px 0;
  }
  .el-link {
    font-size: 12px;
  }
}
</style>
